import { Icon } from '@iconify/vue'
import {
  ElCard,
  ElCol,
  ElDescriptions,
  ElDescriptionsItem,
  ElRow,
  ElTable,
  ElTableColumn
} from 'element-plus'
import { defineComponent } from 'vue'

import { useInit } from './hooks'
import styles from './index.module.css'

export default defineComponent({
  setup() {
    const initHook = useInit()

    return {
      ...initHook
    }
  },
  render() {
    return (
      <div class={styles.view}>
        <ElRow gutter={15}>
          <ElCol span={12}>
            <ElCard>
              {{
                header: () => (
                  <div class={styles.cardHeader}>
                    <Icon icon="@local:icon-park-outline:cpu" />
                    <span class={styles.title}>CPU</span>
                  </div>
                ),
                default: () => (
                  <ElTable data={this.info.cpu}>
                    <ElTableColumn label="属性" prop="key"></ElTableColumn>
                    <ElTableColumn label="值" prop="value">
                      {{
                        default: ({ row, $index }: any) =>
                          $index === 0
                            ? row.value
                            : this.filterPercent(row.value)
                      }}
                    </ElTableColumn>
                  </ElTable>
                )
              }}
            </ElCard>
          </ElCol>
          <ElCol span={12}>
            <ElCard>
              {{
                header: () => (
                  <div class={styles.cardHeader}>
                    <Icon icon="@local:icon-park-outline:memory" />
                    <span class={styles.title}>内存</span>
                  </div>
                ),
                default: () => (
                  <ElTable data={this.info.mem}>
                    <ElTableColumn label="属性" prop="key"></ElTableColumn>
                    <ElTableColumn label="内存" prop="内存">
                      {{
                        default: ({ row }: any) => this.filterValue(row.sys)
                      }}
                    </ElTableColumn>
                  </ElTable>
                )
              }}
            </ElCard>
          </ElCol>
        </ElRow>
        <ElCard style={{ marginTop: '15px' }}>
          {{
            header: () => (
              <div class={styles.cardHeader}>
                <Icon icon="@local:icon-park-outline:new-computer" />
                <span class={styles.title}>服务器信息</span>
              </div>
            ),
            default: () => (
              <ElDescriptions border column={2}>
                <ElDescriptionsItem label="服务器名称">
                  {this.info.os.hostname}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="操作系统">
                  {this.info.os.platform}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="服务器IP">
                  {this.info.os.ip}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="系统架构">
                  {this.info.os.arch}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="安全启动">
                  {this.info.os.uefi ? '是' : '否'}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="系统版本">
                  {this.info.os.release}
                </ElDescriptionsItem>
              </ElDescriptions>
            )
          }}
        </ElCard>
        <ElCard style={{ marginTop: '15px' }}>
          {{
            header: () => (
              <div class={styles.cardHeader}>
                <Icon icon="@local:icon-park-outline:code-one" />
                <span class={styles.title}>Node信息</span>
              </div>
            ),
            default: () => (
              <ElDescriptions border column={2}>
                <ElDescriptionsItem label="Node版本" span={2}>
                  {this.info.node.version}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="启动时间">
                  {this.startTime}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="运行时长">
                  {this.filterUptime(this.info.node.uptime)}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="安装路径">
                  {this.info.node.nodePath}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="项目路径">
                  {this.info.node.filePath}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="运行参数" span={2}>
                  {this.info.node.args}
                </ElDescriptionsItem>
              </ElDescriptions>
            )
          }}
        </ElCard>
        <ElCard style={{ marginTop: '15px' }}>
          {{
            header: () => (
              <div class={styles.cardHeader}>
                <Icon icon="@local:icon-park-outline:data" />
                <span class={styles.title}>Redis信息</span>
              </div>
            ),
            default: () => (
              <ElDescriptions border column={4}>
                <ElDescriptionsItem label="Redis版本">
                  {this.info.redis.redis_version}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="运行模式">
                  {this.info.redis.redis_mode === 'standalone'
                    ? '单机'
                    : '集群'}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="端口">
                  {this.info.redis.tcp_port}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="客户端数">
                  {this.info.redis.connected_clients}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="运行时间(天)">
                  {this.info.redis.uptime_in_days}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="使用内存">
                  {this.info.redis.used_memory_human}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="使用CPU">
                  {Number.parseFloat(
                    this.info.redis.used_cpu_user_children
                  ).toFixed(2)}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="内存配置">
                  {this.info.redis.maxmemory_human}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="AOF是否开启">
                  {this.info.redis.aof_enabled === '0' ? '否' : '是'}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="RDB是否成功">
                  {this.info.redis.rdb_last_bgsave_status}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="Key数量">
                  {this.info.redis.db_size}
                </ElDescriptionsItem>
                <ElDescriptionsItem label="网络入口/出口">
                  {this.info.redis.instantaneous_input_kbps}
                  kps/
                  {this.info.redis.instantaneous_output_kbps}
                  kps
                </ElDescriptionsItem>
              </ElDescriptions>
            )
          }}
        </ElCard>
        <ElCard style={{ marginTop: '15px' }}>
          {{
            header: () => (
              <div class={styles.cardHeader}>
                <Icon icon="@local:icon-park-outline:hard-disk" />
                <span class={styles.title}>磁盘状态</span>
              </div>
            ),
            default: () => (
              <ElTable data={this.info.disk}>
                <ElTableColumn label="盘符路径" prop="fs"></ElTableColumn>
                <ElTableColumn label="文件系统" prop="type"></ElTableColumn>
                <ElTableColumn label="盘符类型" prop="mount"></ElTableColumn>
                <ElTableColumn label="总大小">
                  {{
                    default: ({ row }: any) => this.filterSize(row.size)
                  }}
                </ElTableColumn>
                <ElTableColumn label="可用大小">
                  {{
                    default: ({ row }: any) => this.filterSize(row.available)
                  }}
                </ElTableColumn>
                <ElTableColumn label="已用大小">
                  {{
                    default: ({ row }: any) => this.filterSize(row.used)
                  }}
                </ElTableColumn>
                <ElTableColumn label="已用百分比">
                  {{
                    default: ({ row }: any) => this.filterPercent(row.used)
                  }}
                </ElTableColumn>
              </ElTable>
            )
          }}
        </ElCard>
      </div>
    )
  }
})
